<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { type LinkDto } from '@/api/cap'
import { getLinkList, addSession } from '@/api/cap'
import { ElMessage } from 'element-plus'
import tigerVNCPNG from '@/assets/png/tigerVNC.png'
import linuxPNG from '@/assets/png/linux.png'
import windowsPNG from '@/assets/png/windows.png'

const linkList = ref<LinkDto[]>([])

onMounted(() => {
  getLinkList().then((res) => {
    linkList.value = res
  })
})

const clickLinkItem = (item: LinkDto) => {
  addSession(item.linkInfo.id)
    .then((res) => {
      console.log('111' + res)
      window.open(
        window.location.origin + '/desktop?linkId=' + item.linkInfo.id + '&sessionId=' + res,
        res,
      )
    })
    .catch((e) => {
      ElMessage.error('打开连接时发生错误！' + e)
    })
}

const getImg = (dto: LinkDto): string => {
  if (dto.img.length > 5) {
    return dto.img
  }
  switch (dto.linkInfo.linkType) {
    case 'vnc':
      return tigerVNCPNG
    case 'sh':
      return linuxPNG
    default:
      return windowsPNG
  }
}
const getTitle = (item: LinkDto): string => {
  if (item.protocol != 'cap') {
    return item.title
  } else {
    return item.title + '(' + item.subtitle + ')'
  }
}
</script>

<template>
  <div>
    <el-card class="h-[85vh]">
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-8 gap-4 sm:gap-6">
        <!-- 商品卡片 1 -->
        <div
          v-for="item in linkList"
          :key="item.linkInfo.id"
          @click="clickLinkItem(item)"
          class="product-card bg-slate-100 rounded-lg overflow-hidden shadow-md transition duration-300"
        >
          <div class="flex justify-center">
            <img :src="getImg(item)" class="product-image mt-2" />
            <!-- <div class="absolute top-2 right-2">
              <button class="bg-white rounded-full p-2 shadow hover:bg-gray-100">
                <i class="far fa-heart text-gray-500 hover:text-red-500"></i>
              </button>
            </div> -->
          </div>
          <div class="p-3 text-center">
            <h3 class="font-medium text-gray-800">
              {{ item.name == '' ? '默认名称' : item.name }}
            </h3>
            <div class="mt-1 text-red-500 text-xs">
              {{ getTitle(item) }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.product-image {
  height: 100px;
  object-fit: cover;
}
@media (max-width: 640px) {
  .product-image {
    height: 120px;
  }
}
</style>
